<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/testHelper.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="lib/reset.css"/>
</head>
<body>
<style>
    .test-title {
        background: rgb(182, 120, 7);
        color: #fff;
    }

    .test-chart {
        height: 250px;
    }
</style>


<div id="layout0"></div>
<div id="layout1"></div>
<div id="layout2"></div>
<div id="layout3"></div>
<div id="layout4"></div>
<div id="layout5"></div>
<div id="layout6"></div>
<div id="layout7"></div>
<div id="layout7.5"></div>
<div id="layout8"></div>
<div id="layout9"></div>
<div id="layout10"></div>
<div id="layout11"></div>
<div id="layout12"></div>


<script>
    var arrayRows0 = [
        ['product', '2015', '2016', '2017'],
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
    ];

    var arrayRows1 = [
        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
        ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
        ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
    ];

    var arrayRowsNoColumnHeader = [
        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
        ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
        ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
    ];

    var arrayRowsNoRowHeader = [
        ['2012', '2013', '2014', '2015', '2016', '2017'],
        [41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
        [86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
        [24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
        [55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
    ];

    var arrayRowsPairValueColumns = [
        ['2012', null, '2013', null, '2014', 'amount'],
        [41.1, 2585, 30.4, 2473, 65.1, 3418],
        [86.5, 2316, 92.1, 3255, 85.7, 2485],
        [24.1, 1532, 67.2, 1452, 79.5, 4689],
        [55.2, 5312, 67.1, 3266, 69.2, 1354]
    ];

    var errorData = [
        ['name', 'Price', 'Prime cost', 'Prime cost min', 'Prime cost max', 'Price min', 'Price max'],
        ['Blouse "Blue Viola"', 101.88, 99.75, 76.75, 116.75, 69.88, 119.88],
        ['Dress "Daisy"', 155.8, 144.03, 126.03, 156.03, 129.8, 188.8],
        ['Trousers "Cutesy Classic"', 203.25, 173.56, 151.56, 187.56, 183.25, 249.25],
        ['Dress "Morning Dew"', 256, 120.5, 98.5, 136.5, 236, 279],
        ['Turtleneck "Dark Chocolate"', 408.89, 294.75, 276.75, 316.75, 385.89, 427.89],
        ['Jumper "Early Spring"', 427.36, 430.24, 407.24, 452.24, 399.36, 461.36],
        ['Breeches "Summer Mood"', 356, 135.5, 123.5, 151.5, 333, 387],
        ['Dress "Mauve Chamomile"', 406, 95.5, 73.5, 111.5, 366, 429],
        ['Dress "Flying Tits"', 527.36, 503.24, 488.24, 525.24, 485.36, 551.36],
        ['Dress "Singing Nightingales"', 587.36, 543.24, 518.24, 555.24, 559.36, 624.36],
        ['Sundress "Cloudy weather"', 603.36, 407.24, 392.24, 419.24, 581.36, 627.36],
        ['Sundress "East motives"', 633.36, 477.24, 445.24, 487.24, 594.36, 652.36],
        ['Sweater "Cold morning"', 517.36, 437.24, 416.24, 454.24, 488.36, 565.36],
        ['Trousers "Lavender Fields"', 443.36, 387.24, 370.24, 413.24, 412.36, 484.36],
        ['Jumper "Coffee with Milk"', 543.36, 307.24, 288.24, 317.24, 509.36, 574.36],
        ['Blouse "Blooming Cactus"', 790.36, 277.24, 254.24, 295.24, 764.36, 818.36],
        ['Sweater "Fluffy Comfort"', 790.34, 678.34, 660.34, 690.34, 762.34, 824.34]
    ];

    // No 北京 上海 江苏
    var nameValueGeo0 = [
        {name: '天津', value: 514},
        {name: '上海', value: 863},
        {name: '重庆', value: 224},
        {name: '河北', value: 671},
        {name: '河南', value: 888},
        {name: '云南', value: 992},
        {name: '辽宁', value: 136},
        {name: '黑龙江', value: 406},
        {name: '湖南', value: 101},
        {name: '安徽', value: 885},
        {name: '新疆', value: 187},
        {name: '浙江', value: 1},
        {name: '江西', value: 138},
        {name: '湖北', value: 337},
        {name: '广西', value: 410},
        {name: '甘肃', value: 22},
        {name: '山西', value: 814},
        {name: '内蒙古', value: 449},
        {name: '陕西', value: 324},
        {name: '吉林', value: 429},
        {name: '福建', value: 377},
        {name: '贵州', value: 811},
        {name: '广东', value: 954},
        {name: '青海', value: 653},
        {name: '西藏', value: 297},
        {name: '四川', value: 981},
        {name: '宁夏', value: 66},
        {name: '海南', value: 667},
        {name: '台湾', value: 345},
        {name: '香港', value: 970},
        {name: '澳门', value: 683}
    ];

    var nameValueGeo1 = [
        {name: '北京', value: 507},
        {name: '天津', value: 263},
        {name: '上海', value: 732},
        {name: '重庆', value: 976},
        {name: '河北', value: 299},
        {name: '安徽', value: 465},
        {name: '新疆', value: 259},
        {name: '浙江', value: 822},
        {name: '江西', value: 922},
        {name: '山西', value: 379},
        {name: '内蒙古', value: 544},
        {name: '吉林', value: 190},
        {name: '福建', value: 66},
        {name: '广东', value: 842},
        {name: '西藏', value: 827},
        {name: '四川', value: 71},
        {name: '宁夏', value: 428},
        {name: '香港', value: 466},
        {name: '澳门', value: 119}
    ]

</script>


<script>
    require(['echarts'], function (echarts) {

        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: arrayRows0
            },
            series: [
                {type: 'pie', id: 'pie'}
            ]
        };

        testHelper.create(echarts, 'layout0', {
            title: 'pie, default encoding, legend',
            option: option
        });
    });
</script>


<script>
    require(['echarts'], function (echarts) {
        var encode = {
            value: '2016',
            itemName: 'product'
        };

        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: arrayRows0
            },
            series: [
                {type: 'pie', id: 'pie', encode: encode}
            ]
        };

        testHelper.create(echarts, 'layout1', {
            title: 'pie, give encoding, default legend',
            option: option,
            dataTable: arrayRows0,
            infoKey: 'encode',
            info: encode
        });
    });
</script>


<script>
    require(['echarts'], function (echarts) {
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: arrayRows0
            },
            series: [
                {
                    type: 'pie',
                    id: 'pie',
                    seriesLayoutBy: 'row',
                    encode: {
                        value: 'Milk Tea',
                        itemName: 'product',
                        tooltip: 'Milk Tea'
                    }
                }
            ]
        };

        testHelper.create(echarts, 'layout2', {
            title: 'pie, give encoding, default legend',
            option: option,
            dataTable: arrayRows0,
            info: {
                legend: '<default>',
                series: option.series
            }
        });
    });
</script>


<script>
    require(['echarts'], function (echarts) {
        var option = {
            legend: {},
            tooltip: {},
            dataset: [{
                source: arrayRowsNoColumnHeader
            }, {
                source: arrayRowsNoRowHeader
            }],
            series: [{
                type: 'pie',
                radius: 50,
                center: ['25%', '25%'],
                sourceHeader: false
            }, {
                type: 'pie',
                radius: 50,
                center: ['50%', '25%']
            }, {
                type: 'pie',
                radius: 50,
                center: ['75%', '25%'],
                sourceHeader: true
            }, {
                type: 'pie',
                radius: 50,
                center: ['25%', '75%'],
                seriesLayoutBy: 'row',
                sourceHeader: false,
                datasetIndex: 1
            }, {
                type: 'pie',
                radius: 50,
                center: ['50%', '75%'],
                seriesLayoutBy: 'row',
                datasetIndex: 1
            }, {
                type: 'pie',
                radius: 50,
                center: ['75%', '75%'],
                seriesLayoutBy: 'row',
                sourceHeader: true,
                datasetIndex: 1
            }]
        };

        testHelper.create(echarts, 'layout3', {
            title: 'no sourceHeader',
            height: 400,
            option: option,
            dataTables: [
                arrayRowsNoColumnHeader,
                arrayRowsNoRowHeader
            ],
            info: {
                legend: '<default>',
                series: option.series
            }
        });
    });
</script>


<script>

    require(['echarts', 'map/js/china'], function (echarts) {
        var option = {
            legend: {},
            tooltip: {},
            dataset: [{
                source: nameValueGeo0
            }, {
                source: nameValueGeo1
            }],
            visualMap: {
                min: 0,
                max: 1500,
                calculable: true
            },
            series: [{
                name: 'A',
                type: 'map',
                label: {
                    show: true
                },
                mapType: 'china'
            }, {
                name: 'B',
                type: 'map',
                label: {
                    show: true
                },
                mapType: 'china',
                datasetIndex: 1
            }]
        };

        testHelper.create(echarts, 'layout4', {
            option: option,
            height: 400,
            dataTables: [
                nameValueGeo0,
                nameValueGeo1
            ],
            info: {
                legend: option.legend,
                tooltip: option.tooltip,
                series: option.series
            }
        });
    });
</script>


<script>
    require(['echarts'], function (echarts) {
        var option = {
            legend: {},
            tooltip: {},
            xAxis: {},
            yAxis: {},
            dataset: [{
                source: arrayRowsPairValueColumns
            }],
            series: [{
                type: 'scatter'
            }, {
                type: 'scatter'
            }, {
                type: 'scatter'
            }]
        };

        testHelper.create(echarts, 'layout5', {
            title: 'column (dimension name duplicated)',
            height: 400,
            option: option,
            dataTables: [
                arrayRowsPairValueColumns
            ],
            info: {
                legend: '<default>',
                series: option.series
            }
        });
    });
</script>


<script>
    require(['echarts'], function (echarts) {


        function renderItem(params, api) {
            var children = [];
            var coordDims = ['x', 'y'];

            for (var baseDimIdx = 0; baseDimIdx < 2; baseDimIdx++) {
                var otherDimIdx = 1 - baseDimIdx;
                var encode = params.encode;
                var baseValue = api.value(encode[coordDims[baseDimIdx]][0]);
                var param = [];
                param[baseDimIdx] = baseValue;
                param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][1]);
                var highPoint = api.coord(param);
                param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][2]);
                var lowPoint = api.coord(param);
                var halfWidth = 5;

                var style = api.style({
                    stroke: api.visual('color'),
                    fill: null
                });

                children.push({
                    type: 'line',
                    shape: makeShape(
                        baseDimIdx,
                        highPoint[baseDimIdx] - halfWidth, highPoint[otherDimIdx],
                        highPoint[baseDimIdx] + halfWidth, highPoint[otherDimIdx]
                    ),
                    style: style
                }, {
                    type: 'line',
                    shape: makeShape(
                        baseDimIdx,
                        highPoint[baseDimIdx], highPoint[otherDimIdx],
                        lowPoint[baseDimIdx], lowPoint[otherDimIdx]
                    ),
                    style: style
                }, {
                    type: 'line',
                    shape: makeShape(
                        baseDimIdx,
                        lowPoint[baseDimIdx] - halfWidth, lowPoint[otherDimIdx],
                        lowPoint[baseDimIdx] + halfWidth, lowPoint[otherDimIdx]
                    ),
                    style: style
                });
            }

            function makeShape(baseDimIdx, base1, value1, base2, value2) {
                var shape = {};
                shape[coordDims[baseDimIdx] + '1'] = base1;
                shape[coordDims[1 - baseDimIdx] + '1'] = value1;
                shape[coordDims[baseDimIdx] + '2'] = base2;
                shape[coordDims[1 - baseDimIdx] + '2'] = value2;
                return shape;
            }

            return {
                type: 'group',
                children: children
            };
        }

        var option = {
            dataset: {
                source: errorData
            },
            tooltip: {},
            legend: {},
            dataZoom: [{
                type: 'slider'
            }, {
                type: 'inside'
            }],
            visualMap: {
                min: 0,
                max: 1000,
                dimension: 1,
                calculable: true
            },
            xAxis: {},
            yAxis: {},
            series: [{
                type: 'scatter',
                name: 'error',
                encode: {
                    x: 2,
                    y: 1,
                    tooltip: [2, 1, 3, 4, 5, 6],
                    itemName: 0
                },
                itemStyle: {
                    normal: {
                        color: '#77bef7'
                    }
                }
            }, {
                type: 'custom',
                name: 'error',
                renderItem: renderItem,
                encode: {
                    x: [2, 3, 4],
                    y: [1, 5, 6],
                    tooltip: [2, 1, 3, 4, 5, 6],
                    itemName: 0
                },
                z: 100
            }]
        };

        testHelper.create(echarts, 'layout6', {
            title: 'error data (custom)',
            height: 400,
            dataTables: [
                errorData
            ],
            option: option
        });
    });
</script>


<script>

    require(['echarts', 'data/stock-DJI.json'], function (echarts, source) {
        var option = {
            legend: {},
            tooltip: {trigger: 'axis'},
            xAxis: {type: 'category'},
            yAxis: {},
            dataset: [{
                source: source
            }],
            dataZoom: [{}, {type: 'inside'}],
            animation: false,
            series: [{
                type: 'candlestick',
                encode: {
                    x: 0,
                    y: [1, 2, 3, 4]
                }
            }]
        };

        testHelper.create(echarts, 'layout7', {
            height: 400,
            option: option,
            dataTables: [source],
            info: {
                series: option.series
            }
        });
    });
</script>


<script>

    require(['echarts'], function (echarts, source) {
        // Thanks to <https://github.com/OvidiuBuleandra>
        option = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: "category",
                scale: true
            },
            yAxis: {
                type: "value",
                scale: true,
                boundaryGap: ['5%', '5%']
            },
            dataZoom: [{
                type: 'slider'
            }, {
                type: 'inside'
            }],
            dataset: {
                dimensions: ["date", "open", "high", "low", "close", "volume", {
                    name: "haOpen",
                    displayName: 'open'
                }, "haHigh", "haLow", "haClose", "sma9"],
                source: [
                    ["2018-01-09 14:30:00", 14636.21, 14682.6, 14401.0, 14659.57, 349.069176, 14647.89, 14682.6, 14401.0, 14594.845, 0.0],
                    ["2018-01-09 15:00:00", 14650.0, 14700.0, 14238.99, 14347.43, 459.735215, 14621.3675, 14700.0, 14238.99, 14484.105, 0.0],
                    ["2018-01-09 15:30:00", 14374.72, 14434.2, 14011.05, 14041.03, 697.055035, 14552.73625, 14552.73625, 14011.05, 14215.25, 0.0],
                    ["2018-01-09 16:00:00", 14072.87, 14497.06, 14064.13, 14349.0, 671.165463, 14383.993125, 14497.06, 14064.13, 14245.765, 0.0],
                    ["2018-01-09 16:30:00", 14369.98, 14640.99, 14340.0, 14560.48, 416.750768, 14314.8790625, 14640.99, 14314.8790625, 14477.8625, 0.0],
                    ["2018-01-09 17:00:00", 14551.42, 14800.0, 14551.41, 14749.55, 357.445717, 14396.37078125, 14800.0, 14396.37078125, 14663.095000000001, 0.0],
                    ["2018-01-09 17:30:00", 14745.0, 14766.2, 14485.0, 14654.96, 306.727704, 14529.732890625, 14766.2, 14485.0, 14662.789999999999, 0.0],
                    ["2018-01-09 18:00:00", 14655.01, 14829.0, 14585.01, 14800.1, 194.858965, 14596.261445312499, 14829.0, 14585.01, 14717.28, 0.0],
                    ["2018-01-09 18:30:00", 14800.1, 14998.62, 14792.03, 14951.01, 313.268531, 14656.770722656249, 14998.62, 14656.770722656249, 14885.44, 0.0],
                    ["2018-01-09 19:00:00", 14968.0, 14982.0, 14778.47, 14810.0, 214.504459, 14771.105361328126, 14982.0, 14771.105361328126, 14884.6175, 16213.681111111111],
                    ["2018-01-09 19:30:00", 14810.0, 14973.49, 14799.95, 14949.98, 144.830078, 14827.861430664063, 14973.49, 14799.95, 14883.355, 16245.94888888889],
                    ["2018-01-09 20:00:00", 14949.98, 14990.0, 14865.49, 14916.91, 145.574797, 14855.608215332031, 14990.0, 14855.608215332031, 14930.595000000001, 16309.224444444444],
                    ["2018-01-09 20:30:00", 14914.03, 14945.01, 14799.01, 14803.44, 146.21296, 14893.101607666016, 14945.01, 14799.01, 14865.372500000001, 16393.936666666665],
                    ["2018-01-09 21:00:00", 14803.46, 14863.93, 14700.44, 14799.0, 190.167582, 14879.237053833009, 14879.237053833009, 14700.44, 14791.7075, 16443.936666666665],
                    ["2018-01-09 21:30:00", 14798.99, 14798.99, 14650.0, 14717.82, 209.543776, 14835.472276916506, 14835.472276916506, 14650.0, 14741.449999999999, 16461.41888888889],
                    ["2018-01-09 22:00:00", 14717.82, 14781.56, 14600.0, 14615.9, 164.859485, 14788.461138458253, 14788.461138458253, 14600.0, 14678.82, 16446.568888888887],
                    ["2018-01-09 22:30:00", 14647.09, 14861.56, 14615.4, 14755.03, 228.445843, 14733.640569229126, 14861.56, 14615.4, 14719.77, 16457.687777777777],
                    ["2018-01-09 23:00:00", 14755.33, 14780.0, 14680.0, 14702.33, 150.779654, 14726.705284614563, 14780.0, 14680.0, 14729.415, 16446.824444444443],
                    ["2018-01-09 23:30:00", 14709.49, 14709.49, 14420.0, 14462.81, 274.752199, 14728.060142307282, 14728.060142307282, 14420.0, 14575.447499999998, 16392.579999999998],
                    ["2018-01-10 00:00:00", 14452.0, 14536.36, 14407.77, 14435.0, 279.156552, 14651.753821153641, 14651.753821153641, 14407.77, 14457.782500000001, 16350.913333333334],
                    ["2018-01-10 00:30:00", 14435.0, 14459.94, 14182.84, 14254.92, 435.050575, 14554.768160576821, 14554.768160576821, 14182.84, 14333.175, 16273.684444444445],
                    ["2018-01-10 01:00:00", 14234.7, 14290.56, 14125.0, 14259.98, 422.926221, 14443.97158028841, 14443.97158028841, 14125.0, 14227.560000000001, 16200.692222222224],
                    ["2018-01-10 01:30:00", 14259.98, 14454.95, 14144.13, 14400.0, 377.788542, 14335.765790144205, 14454.95, 14144.13, 14314.765, 16155.865555555552],
                    ["2018-01-10 02:00:00", 14401.0, 14480.0, 13750.0, 13972.46, 582.921859, 14325.265395072103, 14480.0, 13750.0, 14150.865, 16064.027777777777]
                ]
            },
            series: [{
                type: "candlestick",
                encode: {
                    x: "date",
                    // y: ["open", "close", "low", "high"],
                    y: ["haOpen", "haClose", "haLow", "haHigh"],
                    tooltip: ["haOpen", "haHigh", "haLow", "haClose"]
                }
            }]
        };

        testHelper.create(echarts, 'layout7.5', {
            title: 'Check: Y use haOpen, haHigh, haLow, haClose, but display name of "haOpen" is open',
            height: 400,
            option: option,
            dataTable: option.dataset.source,
            info: {
                series: option.series
            }
        });
    });
</script>


<script>

    require(['echarts', 'data/stock-DJI.json'], function (echarts, source) {
        var option = {
            legend: {},
            tooltip: {trigger: 'axis'},
            xAxis: {type: 'time'},
            yAxis: {},
            dataset: [{
                source: source
            }],
            dataZoom: [{}, {type: 'inside'}],
            animation: false,
            series: [{
                type: 'candlestick',
                encode: {
                    x: 0,
                    y: [1, 2, 3, 4]
                }
            }]
        };

        testHelper.create(echarts, 'layout8', {
            title: 'time axis',
            height: 400,
            option: option,
            dataTables: [source],
            info: {
                series: option.series
            }
        });
    });
</script>


<script>

    require(['echarts'], function (echarts, source) {
        var option = {
            legend: {},
            dataset: [{
                source: arrayRows1
            }],
            parallelAxis: [
                {dim: 0, type: 'category'},
                {dim: 1},
                {dim: 2},
                {dim: 3}
            ],
            parallel: {
                axisExpandable: true,
                axisExpandCenter: 15,
                axisExpandCount: 10,
                axisExpandWidth: 60,
                axisExpandTriggerOn: 'mousemove',

                parallelAxisDefault: {
                    type: 'value',
                    nameLocation: 'end',
                    nameGap: 20,
                    tooltip: {
                        show: true
                    },
                    nameTextStyle: {
                        fontSize: 14
                    },
                    splitLine: {
                        show: false
                    }
                }
            },
            series: [{
                type: 'parallel'
            }]
        };

        testHelper.create(echarts, 'layout9', {
            height: 400,
            option: option,
            dataTables: [arrayRows1]
        });
    });
</script>


<script>
    require(['echarts'], function (echarts) {

        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: arrayRows0
            },
            series: [
                {
                    label: {
                        formatter: '{@product} {@[1]}'
                    },
                    type: 'funnel',
                    id: 'pie'
                }
            ]
        };

        testHelper.create(echarts, 'layout10', {
            option: option,
            dataTable: arrayRows0
        });
    });
</script>


<script>
    require(['echarts'], function (echarts) {
        var option = {
            dataset: {
                source: [
                    [12, 323, 11.2],
                    [23, 167, 8.3],
                    [81, 284, 12],
                    [91, 413, 4.1],
                    [13, 287, 13.5]
                ]
            },
            xAxis: {},
            yAxis: {},
            visualMap: {
                show: false,
                dimension: 2,
                min: 2,
                max: 15,
                inRange: {
                    symbolSize: [5, 60]
                }
            },
            series: {
                type: 'scatter'
            }
        };

        testHelper.create(echarts, 'layout11', {
            option: option,
            dataTable: option.dataset.source
        });
    });
</script>

<script>
    require(['echarts'], function (echarts) {
        var option = {
            dataset: {
                source: [
                    ['product', '2015', '2016', '2017'],
                    ['Matcha Latte', 43.3, 85.8, 93.7],
                    ['Milk Tea', 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 72.4, 53.9, 39.1]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ],
            toolbox: {
                feature: {
                    dataView: {}
                }
            }
        }

        testHelper.create(echarts, 'layout12', {
            option: option,
            dataTable: option.dataset.source
        });
    });
</script>

</body>
</html>
